<template>
	<div id="app">
			<router-view v-if="isRouterAlive"></router-view>
	</div>
</template>
<script type="text/javascript">
	export default {
		name: 'App',
		provide() { // 在祖先组件中通过 provide 提供变量
			return {
				reload: this.reload //  声明一个变量
			}
		},
		data() {
			return {
				isRouterAlive: true // 控制 router-view 是否显示达到刷新效果
			}
		},
		methods: {
			// provide中声明的变量
			reload() {
				// 通过 this.isRouterAlive 控制 router-view 达到刷新效果
				this.isRouterAlive = false
				this.$nextTick(function() {
					this.isRouterAlive = true
				})
			}
		}
	}
</script>
<style>
	* {
		margin: 0;
		padding: 0;
	}

	em,
	i {
		font-style: normal;
	}

	a {
		color: #666666;
	}

	.wp96 {
		width: 96%;
	}

	.m-center {
		margin: 0 auto;
	}

	.mt12 {
		margin-top: 12px;
	}

	.f12 {
		font-size: 0.75rem;
	}

	.f10 {
		font-size: 0.625rem;
	}

	.hide {
		display: none;
	}

	.clearfix {
		display: block;
	}

	.clearfix::after {
		clear: both;
		content: " ";
		display: block;
		height: 0;
		line-height: 0;
		visibility: hidden;
	}

	.curr {
		color: #FF3333;
	}

	.s1 {
		background-position: -5px -46px;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	img {
		vertical-align: top;
		border: none;
		display: block;
		width: 100%;
	}

	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		/* text-align: center; */
		color: #666666;
		background: #f5f5f5;
	}

	#nav {
		padding: 30px;
	}

	#nav a {
		font-weight: bold;
		color: #2c3e50;
	}

	#nav a.router-link-exact-active {
		color: #42b983;
	}
</style>
